<template>
  <div class="container">
    <h3>角色列表</h3>
    <el-form ref="roleSearchForm" :model="role" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="角色名称">
            <el-input
              v-model="role.roleName"
              size="medium"
              placeholder="请输入角色名称"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6" style="margin-left: 20px">
          <el-form-item label="角色编码">
            <el-input
              v-model="role.roleCode"
              placeholder="请输入角色编码"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="9">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="role.createTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="9">
          <el-form-item label="更新时间" style="margin-left: 20px">
            <el-date-picker
              v-model="role.updateTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-button
            type="success"
            icon="el-icon-plus"
            size="medium"
            @click="handleInsert"
            v-if="$hasBP('bnt.role.insert')"
            >添加</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-search"
            size="medium"
            @click="search"
            >搜索</el-button
          >
          <el-button
            type="info"
            icon="el-icon-thumb"
            size="medium"
            @click="reset"
            >重置</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete-solid"
            size="medium"
            @click="batchDel"
            v-if="delRoleList.length > 1 && $hasBP('bnt.role.delete')"
            >批量删除</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <el-table
      :data="roleList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-if="$hasBP('bnt.role.list')"
    >
      <el-table-column
        type="selection"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="roleCode"
        label="角色编码"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="280"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        min-width="280"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="240"
        align="center"
        style="margin-right: 40px"
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-if="$hasBP('bnt.role.delete')"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="primary"
            v-if="$hasBP('bnt.menu.grant')"
            @click="handleGrant(scope.row)"
            >授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col style="text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[3, 5, 7]"
          :page-size="searchForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <insert-edit-dialog
      :dialogParam="dialogParam"
      :getAllRoles="getAllRoles"
    ></insert-edit-dialog>

    <el-dialog title="菜单授权" :visible="dialogVisible" width="30%">
      <el-tree
        ref="menuTree"
        node-key="id"
        :data="menuList"
        show-checkbox
        @check="handleCheckChange"
        :default-checked-keys="defaultCheck"
        :default-expanded-keys="defaultCheck"
        :props="props"
      >
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { index, deleteRole, getRoleMenu, menuGrant } from "@/api/role/role";
import { getMenuList } from "@/api/menu/menu";
import insertEditDialog from "@/components/Role/insertEditDialog.vue";

export default {
  name: "",
  components: {
    insertEditDialog,
  },
  props: {},
  data() {
    return {
      roleId: "",
      submitList: [],
      defaultCheck: [],
      props: {
        label: "name",
        children: "children",
      },
      dialogVisible: false,
      menuList: [],
      searchForm: {
        page: 1,
        limit: 3,
      },
      total: 0,
      role: {
        roleName: "",
        roleCode: "",
        createTime: [],
        updateTime: [],
      },
      roleList: [],
      dialogParam: {
        title: "",
        dialogVisible: false,
        role: {
          roleName: "",
          roleCode: "",
          description: "",
        },
        state: "",
      },
      delRoleList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleCheckChange(value) {
      let s = this.$refs.menuTree.getHalfCheckedNodes();
      let y = this.$refs.menuTree.getCheckedNodes();
      let data = [];
      s.forEach((element) => {
        let m = {
          roleId: this.roleId,
          menuId: element.id,
        };
        data.push(m);
      });
      y.forEach((element) => {
        let m = {
          roleId: this.roleId,
          menuId: element.id,
        };
        data.push(m);
      });
      this.submitList = data;
    },
    submitMenu() {
      menuGrant(this.roleId, this.submitList).then((res) => {
        if (res.data) {
          this.$message.success("授权成功");
        } else {
          this.$message.error("授权失败");
        }
        this.dialogVisible = false;
        this.getAllRoles();
      });
    },
    handleGrant(row) {
      getRoleMenu(row)
        .then((res) => {
          this.defaultCheck = res.data;
        })
        .then(() => {
          getMenuList().then((res) => {
            this.menuList = res.data;
            this.dialogVisible = true;
            this.roleId = row.id;
          });
        });
    },
    batchDel() {
      deleteRole(this.delRoleList).then((res) => {
        if (res.data) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
        this.getAllRoles();
      });
    },
    handleSelectionChange(value) {
      this.delRoleList = value;
    },
    handleCurrentChange(value) {
      this.searchForm.page = value;
      this.getAllRoles();
    },
    handleSizeChange(value) {
      this.searchForm.limit = value;
      this.getAllRoles();
    },
    reset() {
      this.role = {
        roleName: "",
        roleCode: "",
        createTime: [],
        updateTime: [],
      };
      this.searchForm = {
        page: 1,
        limit: 3,
      };
      this.getAllRoles();
    },
    getAllRoles() {
      index(this.searchForm.page, this.searchForm.limit, this.role).then(
        (res) => {
          this.roleList = res.data.records;
          this.total = res.data.total;
        }
      );
    },
    search() {
      this.getAllRoles();
    },
    handleEdit(row) {
      (this.dialogParam = {
        title: "",
        dialogVisible: false,
        role: {
          roleName: "",
          roleCode: "",
          createTime: "",
          updateTime: "",
        },
        state: "",
      }),
        (this.dialogParam.title = "角色修改");
      this.dialogParam.dialogVisible = true;
      this.dialogParam.role = row;
      this.dialogParam.state = "update";
    },
    handleDelete(row) {
      this.delRoleList = [];
      this.delRoleList.push(row);
      deleteRole(this.delRoleList).then((res) => {
        if (res.data) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
        this.getAllRoles();
      });
    },
    handleInsert() {
      (this.dialogParam = {
        title: "",
        dialogVisible: false,
        role: {
          roleName: "",
          roleCode: "",
          createTime: "",
          updateTime: "",
        },
        state: "",
      }),
        (this.dialogParam.title = "角色添加");
      this.dialogParam.dialogVisible = true;
      this.dialogParam.state = "insert";
    },
  },
  created() {
    this.getAllRoles();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.container {
  margin-left: 30px;
}
</style>